import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import seaImage from '../images/sea.png';
import tribalImage from '../images/Tribal.png';
import Professional from '../images/Professional.png';
import Bohemian from '../images/Bohemian.jpg';
import Minimalist from '../images/Minimalist.jpg';
import Industrial from '../images/Industrial.jpg';
import Cyberpunk from '../images/Cyberpunk.jpg';
import Scandinavian from '../images/Scandinavian.jpg';

interface StyleCategory {
  id: string;
  name: string;
}

interface DesignStyle {
  id: string;
  name: string;
  description: string;
  characteristics: string[];
  image: string;
  category: string;
}

const Styles: React.FC = () => {
  const [selectedCategory, setSelectedCategory] = useState<string>('all');
  const [searchQuery, setSearchQuery] = useState<string>('');

  const styleCategories: StyleCategory[] = [
    { id: 'all', name: 'All Styles' },
    { id: 'modern', name: 'Modern' },
    { id: 'traditional', name: 'Traditional' },
    { id: 'eclectic', name: 'Eclectic' },
    { id: 'themed', name: 'Themed' }
  ];

  const designStyles: DesignStyle[] = [
    {
      id: 'minimalist',
      name: 'Minimalist',
      description: 'Clean lines, simple color palettes, and clutter-free spaces that focus on functionality and simplicity.',
      characteristics: ['Clean lines', 'Neutral colors', 'Functional furniture', 'Clutter-free', 'Quality over quantity'],
      image: Minimalist,
      category: 'modern'
    },
    {
      id: 'scandinavian',
      name: 'Scandinavian',
      description: 'Light and airy spaces with natural materials, simple forms, and a focus on comfort and functionality.',
      characteristics: ['Light woods', 'White walls', 'Cozy textiles', 'Natural light', 'Functional design'],
      image: Scandinavian,
      category: 'modern'
    },
    {
      id: 'industrial',
      name: 'Industrial',
      description: 'Raw and unfinished aesthetic with exposed building materials, vintage furniture, and metal accents.',
      characteristics: ['Exposed brick', 'Metal fixtures', 'Raw materials', 'Open spaces', 'Vintage elements'],
      image: Industrial,
      category: 'modern'
    },
    {
      id: 'bohemian',
      name: 'Bohemian',
      description: 'Eclectic and free-spirited style with rich patterns, vibrant colors, and globally-inspired accessories.',
      characteristics: ['Mixed patterns', 'Vibrant colors', 'Plants', 'Layered textiles', 'Global influences'],
      image: Bohemian,
      category: 'eclectic'
    },
    {
      id: 'coastal',
      name: 'Coastal',
      description: 'Beach-inspired design with light colors, natural textures, and ocean-themed decor elements.',
      characteristics: ['Blue and white palette', 'Natural textures', 'Light woods', 'Nautical elements', 'Airy feel'],
      image: seaImage,
      category: 'themed'
    },
    {
      id: 'professional',
      name: 'Professional',
      description: 'Sophisticated and functional spaces designed for productivity with clean lines and organized storage.',
      characteristics: ['Ergonomic furniture', 'Organized storage', 'Neutral colors', 'Minimal distractions', 'Functional layout'],
      image: Professional,
      category: 'modern'
    },
    {
      id: 'tribal',
      name: 'Tribal',
      description: 'Bold patterns and earthy colors inspired by indigenous cultures around the world.',
      characteristics: ['Geometric patterns', 'Earthy tones', 'Natural materials', 'Handcrafted items', 'Cultural elements'],
      image: tribalImage,
      category: 'traditional'
    },
    {
      id: 'cyberpunk',
      name: 'Cyberpunk',
      description: 'Futuristic design with neon colors, high-tech elements, and a dark, edgy aesthetic.',
      characteristics: ['Neon lighting', 'Dark base colors', 'Futuristic elements', 'High-tech features', 'Urban edge'],
      image: Cyberpunk,
      category: 'themed'
    },
    {
      id: 'mid-century-modern',
      name: 'Mid-Century Modern',
      description: 'Iconic style from the mid-20th century featuring clean lines, organic forms, and a mix of traditional and non-traditional materials.',
      characteristics: ['Organic shapes', 'Clean lines', 'Contrasting materials', 'Functionality', 'Minimal ornamentation'],
      image: "https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
      category: 'modern'
    }
  ];

  const filteredStyles = designStyles.filter(style => {
    const matchesCategory = selectedCategory === 'all' || style.category === selectedCategory;
    const matchesSearch = style.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          style.description.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCategory && matchesSearch;
  });

  return (
    <div className="py-24 bg-gradient-to-b from-gray-50 to-gray-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <motion.h1
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="text-4xl font-bold text-gray-900"
          >
            Choose from Interior Design Styles
          </motion.h1>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="mt-4 text-xl text-gray-600"
          >
            Explore our collection of design styles to transform your space
          </motion.p>
        </div>

        <div className="mb-12">
          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
            <div className="flex flex-wrap gap-2">
              {styleCategories.map(category => (
                <button
                  key={category.id}
                  onClick={() => setSelectedCategory(category.id)}
                  className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                    selectedCategory === category.id
                      ? 'bg-blue-500 text-white'
                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                  }`}
                >
                  {category.name}
                </button>
              ))}
            </div>
            <div className="w-full md:w-auto">
              <input
                type="text"
                placeholder="Search styles..."
                className="w-full md:w-64 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {filteredStyles.map((style, index) => (
            <motion.div
              key={style.id}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              className="bg-white rounded-xl shadow-md overflow-hidden"
            >
              <div className="h-64 overflow-hidden">
                <img
                  src={style.image}
                  alt={style.name}
                  className="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-semibold text-gray-900 mb-2">{style.name}</h3>
                <p className="text-gray-600 mb-4">{style.description}</p>
                <div className="mb-4">
                  <h4 className="text-lg font-semibold text-gray-800">Characteristics:</h4>
                  <ul className="list-disc pl-6">
                    {style.characteristics.map((char, i) => (
                      <li key={i} className="text-gray-700">{char}</li>
                    ))}
                  </ul>
                </div>
                {/* <button
                  className="mt-8 px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
                  onClick={() => window.location.href = '/'}
                >
                  View More
                </button> */}
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Styles; 
